.box {
  margin: 0 auto;
  width: 500px;
  height: 300px;
  background-color: #fff;
  border: 1px solid red;
  border-radius: 20px;
  z-index: 1;
  position: relative;
}


.bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
}

.bg image {
  width: 100%;
  height: 100%;
  color: #68960c69;
}

.btns-box {
  display: flex;
  justify-content: flex-end;
  padding: 15rpx 0;
}

.btns-box .btn {
  padding: 5rpx 15rpx;
  margin: 0 15rpx;
  width: 168rpx;
  height: 50rpx;
  background: rgba(104, 150, 12, 0.5);
  border-radius: 8rpx 8rpx 8rpx 8rpx;
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  font-size: 28rpx;
  color: #FFFFFF;
  line-height: 28rpx;
  text-align: center;
  font-style: normal;
  text-transform: none;
  line-height: 50rpx;
}

/* 宠物区 */
.pets-box {
  width: 75vw;
  margin: 0 auto;
  padding: 45rpx 0;
  height: 53vh;
  position: relative;
}

.pets-box .pet {
  width: 75%;
  margin: 0 auto;
  position: absolute;
  bottom: 21.5%;
  left: 50%;
  margin-left: -36.5%;
  z-index: 10;

}

.pets-box .pet image {
  width: 100%;
}

.pets-box .throne {}

.pets-box .throne image {
  width: 100%;
  height: 180rpx;
}

/* 等级操作区域 */
.level-show {
  transform: translateY(-25rpx);
  height: 220rpx;
  position: relative;
  z-index: 1;
}

.level-show .swiper-box {
  transform: translateY(-95rpx);
  position: relative;
  z-index: 15;padding: 45rpx 0 0 0;height: 170rpx;
}

.level-show .level-swiper-item {
  height: 45px;
  text-align: center;
}

.level-show .level-item {
  width: 100%;
  text-align: center;
  display: flex;
  justify-content: center;
  height: 85px;
}

.level-show .level-item .level {
  width: 50rpx;
  height: 50rpx;
  text-align: center;
  line-height: 50rpx;
  background-color: #68960C;
  border-radius: 50%;
  color: #fff;
  font-size: 26rpx;
  transform: translateY(15rpx) scale(0.85);
  transition: all 0.3s ease;
  position: relative;
}

.level-show .level-item .level .icon {
  opacity: 1;
  width: 100%;
  height: 100%;
  transform: scale(1.5);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}

.level-show .level-item .level text {
  position: relative;
  z-index: 1;
}

.swiper-item-active .level {
  transform: translateY(35rpx) scale(1.0) !important;
}

.swiper-item-active .level .icon {
  opacity: 1;
}

.level-show .level-item .level-tips {
  position: absolute;
  transform: translateY(45px);
  display: none;
  color: #68960C;
  font-size: 26rpx;
  padding: 5px 0 0 0;
}

.swiper-item-active.level-item .level-tips {
  display: block;
}

.swiper-item[aria-current="true"] .swiper-item-content {
  transform: scale(1.2);
  z-index: 1;
}

/* 等级明细 */
.level-box {
  background-color: #ffffffc4;
  position: relative;
  border-radius: 25rpx;
  padding: 25rpx;
}

.level-box .tag {
  position: absolute;
  top: 0;
  right: 0;
  text-align: center;
}

.level-box .tag text {
  position: absolute;
  top: 0;
  right: 0;
  line-height: 32.5px;
  font-size: 26rpx;
  color: #fff;
  text-align: center;
  width: 100%;
}

.level-box .tag image {
  width: 65px;
  height: 32.5px;
}

.level-box .title {}

.level-box .title text {
  color: #68960C;
  font-size: 32rpx;
}

.level-box .desc {}

.level-box .desc text {
  font-size: 25rpx;
  color: rgb(88, 85, 85);
}

.slider-container {
  display: flex;
  align-items: center;
  padding: 65rpx 0 15rpx 0;
}

.slider-container text {
  padding-left: 10rpx;
  color: #4E5969;
  font-weight: 500;
  font-size: 24rpx;
}

.track {
  height: 8rpx;
  background: #68960c41;
  position: relative;
  flex: 1;
  border-radius: 5rpx;
}

.track .progress {
  height: 100%;
  background: linear-gradient(90deg, #68960cef, #7daf18ef);
  border-radius: 5rpx;
}

.track .handle {
  width: 20rpx;
  height: 20rpx;
  background: #FFF;
  border-radius: 50%;
  position: absolute;
  top: -6rpx;
}

.track .handle .handle-tips {
  position: absolute;
  top: -55rpx;
  left: 50%;
  width: 100rpx;
  height: 40rpx;
  border-radius: 8px;
  background: #E2F5AF;
  border: 1px solid #FFFFFF;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: -54rpx;
}

.track .handle .handle-tips::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
  /*三角形的方向*/
  width: 15rpx;
  height: 15rpx;
  background: #E2F5AF;
  border: 1px solid #FFFFFF;
  border-style: none none solid solid
}


.track .handle .handle-tips text {
  padding: 0;
  color: #68960C;
}

/* 入场动画 */
.animation {
  animation: slowZoom 1.5s ease infinite alternate;
  /* 1.5秒循环放大 */
  animation-iteration-count: 1;
  animation-fill-mode: forwards
}

@keyframes slowZoom {
  0% {
    transform: scale(0.1);
  }

  100% {
    transform: scale(1.2);
  }
}